<template>
  <div ref="portaletDiv">
    <a-card :bordered="false">
      <div ref="commandstats" style="height: 340px" />
    </a-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'Cache',
  data() {
    return {
      commandstats: null
    }
  },
  filters: {},
  created() { },
  mounted() {
    this.getFirstChart()
    window.addEventListener('resize', () => {
      this.commandstats.resize()
    })
    this.$emit('setHeight', this.$refs.portaletDiv.offsetHeight)
  },
  computed: {},
  watch: {},
  methods: {
    getFirstChart() {
      this.commandstats = echarts.init(this.$refs.commandstats, 'macarons')
      this.commandstats.setOption({
        title: {
          text: '用户访问来源数',
          // jianchen0
          fontSize: '16',
          fontWeight: '600',
          // 主标题文字颜色
          color: '#333',
          left: 8,
          top: 8
        },
        // tooltip: {
        //   show: true,
        //   trigger: 'item'
        // },
        color: ['#4782DA', '#FF9800', '#34C38F', '#F44336', '#EEEEEE'],
        legend: {
          bottom: '1%',
          left: 'center',
          orient: 'horizontal',
          data: ['搜索引擎', '直接访问', '邮件营销', '联盟广告']
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['60%', '70%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              fontSize: 16,
              formatter: (item) => {
                const info = `${item.value}\r\n \r\n${item.name}`
                return info
              },
              borderWidth: 4
            },
            emphasis: {
              focus: 'none',
              label: {
                show: true,
                fontSize: 16
              }
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              borderRadius: 4,
              borderColor: '#fff',
              borderWidth: 4
            },
            data: [
              { value: 100, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' },
              { value: 484, name: '联盟广告' }
            ]
          }
        ]
      })
    }
  }
}
</script>

<style></style>
